<template>
  <h1>1.组件的基本写法</h1>
  <p>{{ person }}</p>
  <button @click="changePerson">修改person的属性</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import {ref,watch} from "vue";

/* 
  wacth监视一个对象类型响应数据（ref）
  -wacth如果监听的直接是ref对象，则需要书写深度监听（deep）
  -wacth如果监听的是ref对象的value,则默认监听的是这个对象内部属性的变化（默认进行深度监听）
  -wacth如果监听的是ref对象value中的某个属性，且这个属性值是一个对象的时候，监听的它内部属性的变化（默认进行深度监听）
  -wacth如果监视ref对象的value中的某个基本类型属性（wacth的第一个参数应该写为一个函数，返回被侦听的数据），一旦这个基本数据发生改变就能被侦听
  -wacth如果监听ref对象value中的某个对象类型（但是写成函数的形式），则可以监听当前属性的改变，但是如果要监听内部属性的改变，则需要深度监听

  ref中的value属性其实就是reactive创建的代理对象，规则和上边类似
  wacth如果需要监视多个属性，则可以把第一个参数书写为数组
*/
// count逻辑
let person =ref({
  name:"老王",
  age:18,
  score:{
    math:{
      one:100,
      two:145,
      three:160,
    },
    en:90,
  },
});
//修改某个属性  
const changePerson = () => {
  // person.value.score.math.one = 101;
  // person.value.age = 19;
  person.value.name = "lily";
/*   person.value.score = {
    math: {
      one: 200,
      two: 300,
    },
    en: 90,
  };*/
};
/* // 1.监视ref对象的value属性 ，这样写主要是看能否监听到基础类型和对象类型
watch (person.value,(newVal,oldVal)=>{
  console.log("count的监听",newVal,oldVal); 

}) */
 
/* // 2.监视ref对象
    watch(
      person,
      (newVal,oldVal) =>{
        console.log("count的监听",newVal,oldVal);
       },
       {deep:true}
    ) */

/*    //3.监视ref对象的value中的某个属性 且值是一个对象
  watch(person.value.score, (newVal, oldVal) => {
    console.log( "count的监听",newVal, oldVal);
  }); */

  //4. 监视ref对象的value中的某个属性， 值是一个基本类型(wacth的第一个参数是一个函数,返回被侦听的数据)
 /*  watch(
    () => person.value.age,
    (newVal, oldVal) => {
      console.log(newVal, oldVal);
    }
  ); */

  
//5.wacth如果监听ref对象value中的某个对象类型(但是写成函数的形式),
 /*  watch(
    () => person.value.score,
    (newVal, oldVal) => {
      console.log(newVal, oldVal);
    },
    { deep: true }
  ); */

   //6.wacth一次性监视多个属性
/* watch(
  [() => person.value.age, () => person.value.name, person.value.score],
  () => {
    console.log("watch");
  }
);  */

//6.wacth监视多个属性
watch(
  () => person.value.name,
  () => {
    console.log("watch name");
  }
);
watch(
  () => person.value.age,
  () => {
    console.log("watch age");
  }
);

</script>

<style scoped></style>
